import React, { Component } from "react";

import { Link, Route, Switch } from "react-router-dom";

class Hot extends Component {
  render() {
    return <div>这是热映页面</div>;
  }
}
class Cinema extends Component {
  render() {
    return <div>这是影院页面</div>;
  }
}

class Home extends Component {
  render() {
    // console.log(this.props.match.url);
    // 二次解构的语法
    const {
      match: { url },
    } = this.props;
    // console.log(url);
    return (
      <>
        <div>这是home页面</div>
        <ul>
          <li>
            <Link to={`${url}/hot`}>热映</Link>
          </li>
          <li>
            <Link to={`${url}/cinema`}>影院</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route path={`${url}/hot`} component={Hot}></Route>
          <Route path={`${url}/cinema`} component={Cinema}></Route>
        </Switch>
      </>
    );
  }
}
class About extends Component {
  render() {
    return <div>这是about页面</div>;
  }
}

class App extends Component {
  render() {
    return (
      <>
        <h2>react-router-v5-嵌套路由</h2>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          {/* 如果做嵌套路由，那么被嵌套的那一个组件，不能添加exact属性 */}

          <Route path="/home" component={Home}></Route>
          <Route path="/about" component={About}></Route>
        </Switch>
      </>
    );
  }
}

export default App;
